<template>
  <div :ref="listSwitchName" class="dynamicomponent" :style="{ backgroundImage: 'url(' + datas.bgImg + ')' }">
    <!-- 没有内容展示默认 -->
    <section
      v-show="!datas.imageList[0]"
      :class="[
        datas.commodityType === 5 ? 'defaultcommodityList5' : '',
        datas.commodityType === 1 ? 'defaultcommodityListFlex' : '',
      ]"
      class="defaultcommodity"
      :style="{
        'padding-top': datas.commodityMargin + 'px',
        'padding-left': datas.pageMargin + 'px',
        'padding-right': datas.pageMargin + 'px',
      }">
      <div
        v-for="index in 4"
        :key="index"
        class="defaultcommodityList"
        :class="[
          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
          datas.commodityType === 2 ? 'defaultcommodityList2' : '',
          datas.commodityType === 3 ? 'defaultcommodityList3' : '',
          datas.commodityType === 4 ? 'defaultcommodityList4' : '',
          datas.commodityType === 5 ? 'defaultcommodityList5' : '',
        ]"
        :style="{
          border: datas.moditystyle === 2 ? '1px solid rgba(50,50,51,0.1)' : '',
          'box-shadow': datas.moditystyle === 0 ? '0 2px 8px rgba(93,113,127,0.08)' : '',
          margin: datas.commodityMargin + 'px',
          width:
            datas.commodityType === 1
              ? 50 - datas.commodityMargin / 6 + '%'
              : datas.commodityType === 2
              ? 33 - datas.commodityMargin / 5 + '%'
              : datas.commodityType === 4
              ? 50 - datas.commodityMargin / 5 + '%'
              : '',
          'border-radius': datas.borderRadius + 'px',
        }">
        <!-- 图片 -->
        <div class="bg-pic">
          <img draggable="false" src="../../../assets/images/imgs.png" alt="" :style="{ 'border-radius': datas.borderRadius + 'px' }" />
        </div>

        <!-- 文字内容 -->
        <div
          class="text"
          :style="{
            background: datas.moditystyle !== 3 ? '#fff' : 'none',
            'border-top-right-radius': datas.borderRadius + 'px',
            'border-bottom-right-radius': datas.borderRadius + 'px',
          }">
          <div class="title">
            <!-- 名称 -->
            <h5
              :style="{
                'font-weight': datas.textWeight,
                'text-align': datas.positions === 'center' ? 'center' : '',
              }"
              v-show="datas.commodityType != 0">
              这里显示组件名称，最多显示1行
            </h5>
            <!-- 描述 -->
            <p :style="{'text-align': datas.positions === 'center' ? 'center' : '',}" v-show="datas.commodityType == 3">
              这里显示组件描述，最多显示1行
            </p>
            <div class="dianz" v-if="datas.readNumberShow && datas.commodityType != 0 && datas.commodityType != 4">
              <span>{{ datas.count }}人在学</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section
      v-show="datas.imageList[0]"
      :class="[
        datas.commodityType === 5 ? 'defaultcommodityList5' : '',
        datas.commodityType === 1 ? 'defaultcommodityListFlex' : '',
      ]"
      class="defaultcommodity"
      :style="{
        'padding-top': datas.commodityMargin + 'px',
        'padding-left': datas.pageMargin + 'px',
        'padding-right': datas.pageMargin + 'px',
      }">
      <div
        v-for="(item, index) in datas.imageList"
        :key="index"
        class="defaultcommodityList"
        :class="[
          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
          datas.commodityType === 2 ? 'defaultcommodityList2' : '',
          datas.commodityType === 3 ? 'defaultcommodityList3' : '',
          datas.commodityType === 4 ? 'defaultcommodityList4' : '',
          datas.commodityType === 5 ? 'defaultcommodityList5' : '',
        ]"
        :style="{
          border: datas.moditystyle === 2 ? '1px solid rgba(50,50,51,0.1)' : '',
          'box-shadow': datas.moditystyle === 0 ? '0 2px 8px rgba(93,113,127,0.08)' : '',
          margin: datas.commodityMargin + 'px',
          width:
            datas.commodityType === 1
              ? 50 - datas.commodityMargin / 6 + '%'
              : datas.commodityType === 2
              ? 33 - datas.commodityMargin / 5 + '%'
              : datas.commodityType === 4
              ? 50 - datas.commodityMargin / 5 + '%'
              : '',
          'border-radius': datas.borderRadius + 'px',
        }"
      >
        <!-- 图片 -->
        <div class="bg-pic">
          <img draggable="false" :src="item.coverUrl" alt="" :style="{ 'border-radius': datas.borderRadius + 'px' }" />
        </div>

        <!-- 文字内容 -->
        <div
          class="text"
          :style="{
            background: datas.moditystyle !== 3 ? '#fff' : 'none',
            'border-top-right-radius': datas.borderRadius + 'px',
            'border-bottom-right-radius': datas.borderRadius + 'px',
          }">
          <div class="title">
            <!-- 名称 -->
            <h5 :style="{'font-weight': datas.textWeight, 'text-align': datas.positions === 'center' ? 'center' : ''}"v-show="datas.commodityType != 0">
              {{ item.name }}
            </h5>
            <!-- 描述 -->
            <p :style="{'text-align': datas.positions === 'center' ? 'center' : ''}" v-show="datas.commodityType == 3">
              {{ item.introduce }}
            </p>
            <div
              class="dianz"
              v-if="datas.readNumberShow && datas.commodityType != 0 && datas.commodityType != 4">
              <span>{{ datas.count }}人在学</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: "Dynamicomponent",
  props: {
    datas: Object,
  },
  data() {
    return {
      active1: 0,
      active: 0,
      listSwitchName: null,
      tagColor: "#07c160",
      styleString: {},
    };
  },
  watch: {
    "datas.tabColor": function () {
      this.$refs[this.listSwitchName].querySelector(".van-tabs__line").style.backgroundColor = this.datas.tabColor;
      this.$refs[this.listSwitchName].querySelector(".van-sidebar-item--select").style.borderColor = this.datas.tabColor;
    },
    "datas.commoditylisttype": function () {
      if (this.datas.commoditylisttype === 2) {
        this.$refs[this.listSwitchName].querySelector(".van-sidebar-item--select").style.borderColor = this.datas.tabColor;
      }
    },
    "datas.tagPosition": function () {
      this.tagPositionStyle();
    },
    "datas.commoditycornertype": function () {
      this.tagPositionStyle();
    },
  },
  created() {
    console.log(!this.datas.imageList[0], "88888888ssss");
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs[this.listSwitchName]) {
        this.$refs[this.listSwitchName][0].querySelector(".van-sidebar-item--select").style.borderColor = this.datas.tabColor;
      }
      this.listSwitchName = "listswitching" + document.querySelectorAll(".listswitching").length;
      this.tagPositionStyle();
    });
  },
  methods: {
    // 这里有个bug  当出现多个商品组件且同为类型3时  点击某一个商品组件会无法匹配 .van-sidebar-item 个数
    treeSelect(index) {
      setTimeout(() => {
        this.$refs[this.listSwitchName].querySelectorAll(".van-sidebar-item").forEach((item, i) => {
          if (i !== index) {
            item.style.borderColor = "transparent";
          }
        });
        this.$refs[this.listSwitchName].querySelector(".van-sidebar-item--select").style.borderColor = this.datas.tabColor;
      });
    },

    // 处理标记位置
    tagPositionStyle() {
      this.styleString = {
        position: "absolute",
      };
      switch (this.datas.tagPosition) {
        case 0: // 左上
          this.styleString.top = "5px";
          this.styleString.left = "0px";
          break;
        case 1: // 左下
          this.styleString.bottom = "5px";
          this.styleString.left = "0px";
          break;
        case 2: // 右上
          this.styleString.top = "5px";
          this.styleString.right = "0px";
          this.datas.commoditycornertype === 0 ? (this.styleString.borderRadius = "10px 0px 0px 10px !important") : "";
          break;
        case 3: // 右下
          this.styleString.bottom = "5px";
          this.styleString.right = "0px";
          this.datas.commoditycornertype === 0 ? (this.styleString.borderRadius = "10px 0px 0px 10px !important") : "";
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.dynamicomponent {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 10px 0;
  .more {
    margin-top: 10px;
    height: 25px;
    line-height: 25px;
    text-align: right;
    font-size: 12px;
    color: #999;
    cursor: pointer;
  }
  /* 默认 */
  .defaultcommodity {
    box-sizing: border-box;
    &.defaultcommodityList5 {
      overflow-x: scroll;
      display: flex;
      flex-wrap: nowrap;
      /* 滚动条 */
      &::-webkit-scrollbar {
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #155bd4;
      }
      .el-collapse-item__header,
      .el-collapse-item__wrap {
        border-bottom: 0 !important;
      }
    }
    .bg-pic {
      width: 100%;
      height: 240px;
      position: relative;
    }
    .defaultcommodityList {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      // border: 1px solid #fff;
      &.defaultcommodityList0 {
        width: 100%;
        // height: 340px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        &:nth-of-type(1) {
          margin-top: 0 !important;
        }
        .bg-pic {
          width: 100%;
          height: 240px;
        }
        .text {
          // display: flex;
          // justify-content: space-between;
          // align-items: center;
          padding: 0;
        }
      }
      &.defaultcommodityList1 {
        // border: none !important;
        margin-top: 0 !important;
        &:nth-of-type(even) {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }
        &:nth-of-type(odd) {
          margin-left: 0 !important;
        }
        .bg-pic {
          width: 100%;
          height: 120px;
        }
        .dianz {
          font-size: 12px;
          position: absolute;
          left: 0;
          bottom: 50px;
          width: 70px;
          height: 25px;
          color: #ffffff;
          border-radius: 30px;
          line-height: 25px;
          text-align: left;
          padding-left: 10px;
          background-color: rgba(0, 0, 0, 0.6);
        }
      }
      &.defaultcommodityList2 {
        max-width: 33%;
        margin-top: 0 !important;
        margin-left: 0 !important;
        &:nth-of-type(3n) {
          margin-right: 0 !important;
        }
        .text {
          h5 {
            font-size: 12px !important;
          }
          p {
            font-size: 10px !important;
          }
        }
        .bg-pic {
          width: 100%;
          height: 70px;
          position: relative;
        }
        .dianz {
          font-size: 12px;
          position: absolute;
          left: 0;
          bottom: 50px;
          width: 70px;
          height: 25px;
          color: #ffffff;
          border-radius: 30px;
          line-height: 25px;
          text-align: left;
          padding-left: 10px;
          background-color: rgba(0, 0, 0, 0.6);
        }
      }
      &.defaultcommodityList3 {
        width: 100%;
        flex-direction: row !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        height: 105px;
        display: flex;
        .bg-pic {
          width: 40%;
          height: 100%;
          // float: left;
        }
        .text {
          width: 60%;
          // float: right;
        }
        .dianz {
          font-size: 12px;
          color: #666666;
        }
      }
      &.defaultcommodityList4 {
        margin-top: 0 !important;
        &:nth-of-type(even) {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }
        &:nth-of-type(odd) {
          margin-left: 0 !important;
        }
        .bg-pic {
          width: 100%;
          height: 120px;
        }
        .text {
          padding: 0;
          .title {
            h5 {
              position: absolute;
              left: 20px;
              bottom: 40px;
              width: 100px;
              text-overflow: ellipsis;
            }
          }
        }
      }
      &.defaultcommodityList5 {
        width: 100px;
        // height: 160px;
        margin-top: 0 !important;
        margin-right: 0px !important;
        &:first-of-type {
          margin-left: 0px !important;
        }
        .text {
          h5 {
            font-size: 12px !important;
          }
          p {
            font-size: 10px !important;
          }
        }
        .bg-pic {
          width: 100px;
          height: 70px;
        }
      }
      img {
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
      }
      /* 文字 */
      .text {
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        /* 商品名称 */
        h5 {
          font-size: 15px;
          line-height: 20px;
          margin: 0 0 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        /* 商品描述 */
        p {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 16px;
          color: #999;
          font-size: 12px;
          line-height: 16px;
        }
        /* 视频价格 */
        .mony {
          height: 80px;
          // width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: 16px;
            color: #53c856;
            i {
              font-size: 12px;
            }
          }
          i {
            font-size: 16px;
            line-height: 44px;
            color: #53c856;
          }
          em {
            font-style: normal;
            padding: 8px 20px;
            font-size: 12px;
            border: 1px solid #53c856;
            &:nth-of-type(1) {
              border-radius: 15px;
              color: #53c856;
            }
            &:nth-of-type(2) {
              background-color: #53c856;
              border-radius: 15px;
              color: #fff;
            }
            &:nth-of-type(3) {
              color: #53c856;
            }
            &:nth-of-type(4) {
              background-color: #53c856;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .defaultcommodityListFlex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .tab-type2 {
    .van-tabs__wrap {
      min-height: 44px;
    }
    .van-tabs__line {
      height: 2px;
    }
  }
  .type3 {
    .van-tree-select__content {
      flex: 3.9 !important;
      .defaultcommodityList3 {
        height: 84px !important;
        .bg-pic {
          height: 84px !important;
        }
      }
      .text {
        width: 150px;
        h5 {
          font-size: 12px !important;
        }
        p {
          font-size: 10px !important;
        }
        .mony {
          span {
            font-size: 12px !important;
            i {
              font-size: 12px !important;
            }
          }
          i {
            font-size: 14px !important;
          }
          em {
            font-size: 5px !important;
            padding: 1px 5px !important;
          }
        }
      }
    }
    .van-sidebar-item {
      font-size: 16px;
    }
  }
}
</style>
